<template>
  <div class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <!-- 上半部分：背景图和标题 -->
      <div class="modal-header">
        <div class="header-content">
          <h2 class="login-title">会员登录</h2>
          <p class="login-subtitle">Sign In to Your Account</p>
        </div>
        <img 
          src="@/assets/images/home/xx.png" 
          alt="关闭" 
          class="close-btn"
          @click="closeModal"
        />
      </div>
      
      <!-- 下半部分：登录表单 -->
      <div class="modal-body">
        <!-- 手机号输入框 -->
        <div class="input-group">
          <label class="input-label">手机号：</label>
          <input 
            type="tel" 
            class="input-field"
            placeholder="请输入您的手机号"
            v-model="phoneNumber"
          />
        </div>
        
        <!-- 验证码输入框 -->
        <div class="input-group">
          <label class="input-label">验证码：</label>
          <div class="verification-container">
            <input 
              type="text" 
              class="input-field verification-input"
              placeholder="请输入短信验证码"
              v-model="verificationCode"
            />
            <div class="divider"></div>
            <button class="get-code-btn">获取验证码</button>
          </div>
        </div>
        
        <!-- 登录按钮 -->
        <button class="login-btn" @click="handleLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义事件
const emit = defineEmits(['close'])

// 表单数据
const phoneNumber = ref('')
const verificationCode = ref('')

// 关闭弹窗
const closeModal = () => {
  emit('close')
}

// 处理登录
const handleLogin = () => {
  // 这里可以添加登录逻辑
  console.log('登录信息:', { phoneNumber: phoneNumber.value, verificationCode: verificationCode.value })
  closeModal()
}
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 651px;
  height: 498px;
  background: #FFFFFF;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-header {
  width: 100%;
  height: 114px;
  background: url('@/assets/images/home/login.png') no-repeat center;
  background-size: cover;
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    .login-title {
      font-family: 'Alibaba PuHuiTi';
      font-weight: 400;
      font-size: 26px;
      color: #FFFFFF;
      line-height: 20px;
      margin: 0 0 12px 0;
    }
    
    .login-subtitle {
      font-family: 'Alibaba PuHuiTi';
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      opacity: 0.4;
      margin: 0;
    }
  }
  
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 31px;
    height: 31px;
    cursor: pointer;
    
    &:hover {
      opacity: 0.8;
    }
  }
}

.modal-body {
  flex: 1;
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.input-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 23px;
  
  .input-label {
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #343434;
    white-space: nowrap;
  }
  
  .input-field {
    width: 370px;
    height: 65px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E1E1E1;
    padding: 0 25px;
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #343434;
    outline: none;
    
    &::placeholder {
      color: #B7B7B7;
    }
    
    &:focus {
      border-color: #004BB2;
    }
  }
}

.verification-container {
  width: 370px;
  height: 65px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E1E1E1;
  display: flex;
  align-items: center;
  padding: 0 25px;
  flex-shrink: 0;
  box-sizing: border-box;
  
  .verification-input {
    flex: 1;
    border-left: none;
    border-right: none;
    outline: none;
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #343434;
    padding: 0;
    
    &::placeholder {
      color: #B7B7B7;
    }
  }
  
  .divider {
    width: 2px;
    height: 30px;
    background: #E1E1E1;
    // margin: 0 16px;
    margin-left: -16px;
    margin-right: 16px;
    flex-shrink: 0;
  }
  
  .get-code-btn {
    font-family: 'Alibaba PuHuiTi';
    font-weight: 400;
    font-size: 18px;
    color: #FD6631;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    
    &:hover {
      opacity: 0.8;
    }
  }
}

.login-btn {
  width: 370px;
  height: 65px;
  background: #004BB2;
  border-radius: 10px;
  border: none;
  font-family: 'Alibaba PuHuiTi';
  font-weight: 400;
  font-size: 24px;
  color: #FFFEFE;
  cursor: pointer;
  margin-top: 12px;
  margin-left: 90px;
  
  &:hover {
    background: #003A9A;
  }
  
  &:active {
    transform: translateY(1px);
  }
}
</style>
